import React from 'react';
import { Form } from 'components'
import { Button } from 'antd'
import * as regexpUtils from 'utils/regexpUtils'
import moment from 'moment'
export default class extends React.Component {
	state = {
		model: {
			nickname: '12345',
			age: 12,
			description: '红红火火',
			telphone: '15812345678',
			cascader: ['zhejiang', 'hangzhou', 'xihu'],
			city1: ["湖北省", "武汉市"],
			idCard: '420001200807171234',
			gender: 'female',
			color: 'red',
			language: ['Chinese', 'German'],
			switch: true,
			nationality: 'China',
			fruits: ['Apple', 'Pear'],
			agreement: ['同意'],
			endTime: moment('18:00:00', 'HH:mm:ss'),
			startTime: moment('2018/7/24', 'YYYY/MM/DD'),
			weekPicker: moment('2018/7/24', 'YYYY/MM/DD'),
			monthPicker: moment('2018/7/24', 'YYYY/MM/DD'),
			activityTime: [moment('2018/7/24', 'YYYY/MM/DD'), moment('2018/12/26', 'YYYY/MM/DD')],
			format: 'YYYY/MM/DD'
		}
	}
	hanldeSubmit = (data: object) => {
		console.log("demo2-submit-data:", data)
	}
	render() {
		const { model } = this.state
		return (
			<div>
				<Form onSubmit={this.hanldeSubmit} model={model} layout="horizontal">
					<Form.Text label="文本" field="text">
						这是一段纯文本哦
					</Form.Text>
					<Form.Input label="姓名" min={2} max={20} required={true} extra="this is extra" field="nickname" />
					<Form.Input label="年龄" type="number" required={true} field="age" />
					<Form.Input.TextArea label="个人简介"
						required={true}
						autosize={{ minRows: 2, maxRows: 6 }}
						field="description" />
					<Form.Input label="邮箱" type="email" field="email" />
					<Form.Input label="手机号" pattern="^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$" required={true} field="telphone" />

					<Form.Cascader
						label="级联选择"
						field="cascader"
						required={true}
						options={[{
							value: 'zhejiang',
							label: 'Zhejiang',
							children: [{
								value: 'hangzhou',
								label: 'Hangzhou',
								children: [{
									value: 'xihu',
									label: 'West Lake',
								}],
							}],
						}, {
							value: 'jiangsu',
							label: 'Jiangsu',
							children: [{
								value: 'nanjing',
								label: 'Nanjing',
								children: [{
									value: 'zhonghuamen',
									label: 'Zhong Hua Men',
								}],
							}],
						}]}
					/>
					<Form.Cascader
						label="所在城市"
						required={true}
						type="city"
						field="city1"
						options={[]}
					/>
					<Form.Select label="性别"
						placeholder="请选择您的性别"
						required={true}
						options={[{
							value: "male",
							name: "男"
						},
						{
							value: "female",
							name: "女"
						}]}
						field="gender"
					/>
					<Form.Select label="你擅长的语言"
						placeholder="请选择你擅长的语言"
						mode="multiple"
						options={[{
							value: "Chinese",
							name: "汉语"
						},
						{
							value: "English",
							name: "英语"
						},
						{
							value: "French",
							name: "法语"
						},
						{
							value: "German",
							name: "德语"
						},
						{
							value: "Japanese",
							name: "日语"
						}]}
						field="language"
					/>

					<Form.Switch
						label="开关"
						field="switch"
					/>
					<Form.Radio label="你最喜欢的颜色"
						required={true}
						type="radio" // 可选值: radio button 按钮类型的单选 
						options={[{
							value: "red",
							label: "红"
						},
						{
							value: "yellow",
							label: "黄"
						},
						{
							value: "blue",
							label: "蓝"
						}]}
						field="color"
					/>
					<Form.Radio label="国籍"
						required={true}
						type="button" // 可选值: radio button 按钮类型的单选 
						options={[{
							value: "China",
							label: "中国"
						},
						{
							value: "Britain",
							label: "英国"
						},
						{
							value: "France",
							label: "法国"
						},
						{
							value: "Germany",
							label: "德国"
						},
						{
							value: "Japan",
							label: "日本"
						}]}
						field="nationality"
					/>
					<Form.Check.Group
						label="你喜欢吃的水果"
						field="fruits"
						// required
						options={['Apple', 'Pear', 'Orange']}
					/>
					<Form.Check.Group label="是否同意" required={true} field="agreement" options={['同意']} />
					<Form.TimePicker
						label="下班时间"
						field="endTime"
					/>
					<Form.DatePicker
						label="开始时间"
						field="startTime"
					/>
					<Form.DatePicker.MonthPicker
						label="MonthPicker"
						field="monthPicker"
					/>
					<Form.DatePicker.WeekPicker
						label="WeekPicker"
						field="weekPicker"
					/>
					<Form.DatePicker.RangePicker
						label="活动时间"
						field="activityTime"
					/>
					<Button type="primary" htmlType="submit">提交</Button>

				</Form>
			</div>
		)
	}
}